//src/APP.vue

<template>
<div id="list-rendering">
  <ol>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ol>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue"

export default defineComponent({
  name: 'App',
  setup() {
    const todos = reactive([
        { text: 'Learn JavaScript1', id:0 },
        { text: 'Learn Vue', id:1 },
        { text: 'Build something awesome', id:2 }
    ])
    return {
      todos
    }
  }
})
</script>